<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Vue-Lib/dist/vue.js"></script>
</head>
<body>

<div id="app3">
    <h1>计算属性和观察者</h1>
    <h2>计算属性</h2>
    <p>
        在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑，你都应当使用计算属性 computed
        .computed和methods有类似的效果,但是computed有缓存功能。
        <br>
        计算属性默认只有get,可以设置set
    </p>
    <h4>1.基础例子</h4>
    <p>原字符: "{{message}}"</p>
    <p>转换字符串: "{{ reversedMessage }}"</p>
    <button onclick="testMethod()">点击</button>



    <h1>监听器</h1>
    <p>
        虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
        当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
    </p>
    <span>输入</span><input v-model="searchQuery">
    <p>{{searchResult}}</p>
    <p>{{searchResultAtTimer}}</p>

</div>



<script>
    
    
    
var vm3 = new Vue({
    el: '#app3',
    data: {
        message: 'Hello',
        searchQuery: '',
        searchResult: '',
        searchResultAtTimer: ''
    },
    computed: {

//        reversedMessage: function () {
//            // `this` 指向 vm 实例
//            return this.message.split('').reverse().join('')
//        }


        reversedMessage: {
            get: function () {
                console.log('reversedMessage...');
                return this.message.split('').reverse().join('');
            },
            set: function (newValue) {
                console.log('newValue: ' + newValue);
                this.message = newValue;
            }
        }
    },

    methods:{

        asyncMethod:function () {
            var self = this;
            var t = setTimeout(function () {
                self.searchResultAtTimer =  '我被执行了';
                console.log('timer callback');
            },2000);
            this.searchResultAtTimer =  '我要开始被执行了';
        }
        
    },



    watch:{
        searchQuery:function (newVlaue,oldValue) {
            this.searchResult = '输入的是:' +newVlaue;
            console.log('oldValue: ' + oldValue +" newVlaue :"+newVlaue);
            this.asyncMethod();
        }
    }

});

    function testMethod() {
        vm3.reversedMessage =  new Date().toTimeString();
        
    }

</script>

</body>
</html>